<template>
  <div class="manual-upload">
    <div class="page-card">
      <div class="header">
        <el-button @click="goBack" type="text" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>手动上传 - {{ appName }}</h2>
      </div>
      
      <el-divider />
      
      <!-- 二维码区域 -->
      <div class="qr-section">
        <div class="qr-container">
          <div class="qr-code" ref="qrCodeRef"></div>
          <p class="qr-tip">请使用手机扫描二维码进行图片上传</p>
          <div class="upload-url">
  <div>上传地址：</div>
  <el-button 
    type="primary" 
    @click="openUrl" 
    class="url-button">
    打开上传地址
  </el-button>
</div>

        </div>
      </div>
      

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import QRCode from 'qrcode'
import { getToken } from '@/utils/auth'

const route = useRoute()
const router = useRouter()
const openUrl = () => {
  if (uploadUrl.value) {
    window.open(uploadUrl.value, "_blank")
  }
}


// 响应式数据
const appId = ref(route.query.appId)
const appName = ref(route.query.appName || '未知应用')
const uploadUrl = ref('')
const qrCodeRef = ref(null)

// 生成上传URL
const generateUploadUrl = () => {
  const baseUrl = import.meta.env.VITE_API_BASE_QR_URL || import.meta.env.VITE_API_BASE_URL || window.location.origin
  const token = getToken()
  
  // 确保token存在
  if (!token) {
    ElMessage.error('请先登录系统')
    return
  }
  
  const uploadPath = `/mobile-upload?appId=${appId.value}&appName=${encodeURIComponent(appName.value)}&token=${encodeURIComponent(token)}`
  uploadUrl.value = baseUrl + uploadPath
}

// 生成二维码
const generateQRCode = async () => {
  try {
    const qrSvg = await QRCode.toString(uploadUrl.value, {
      type: 'svg',
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
    if (qrCodeRef.value) {
      qrCodeRef.value.innerHTML = qrSvg
    }
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败')
  }
}



// 返回上一页
const goBack = () => {
  router.go(-1)
}



// 组件挂载
onMounted(async () => {
  if (!appId.value) {
    ElMessage.error('缺少应用ID参数')
    router.go(-1)
    return
  }
  
  generateUploadUrl()
  await generateQRCode()
})
</script>

<style scoped>
.manual-upload {
  padding: 20px;
  background-color: #f5f5f5;
}

.page-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: #666;
}

.back-btn:hover {
  color: #409EFF;
}

.qr-section {
  text-align: center;
  margin: 32px 0;
}

.qr-container {
  display: inline-block;
  padding: 24px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  background: #fafafa;
}

.qr-code {
  margin-bottom: 16px;
}

.qr-tip {
  margin: 16px 0 8px 0;
  color: #666;
  font-size: 14px;
}

.upload-url {
  margin-top: 12px;
  font-size: 12px;
  color: #999;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

.url-link {
  word-wrap: break-word;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}


</style>